<template>
  <div class="all-rel">
    <div class="all-flex-center-between all-top-handle">
      <el-button size="small" @click="clearFilter">重置所有筛选</el-button>
    </div>
    <div class="all-flow-table-box">
      <el-table ref="myTable" :data="list" border stripe>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="shrink-box">
              <el-form-item label="订单ID">
                <span>{{ props.row.orderID }}</span>
              </el-form-item>
              <el-form-item label="产品名称">
                <span>{{ props.row.productinfo.productName }}</span>
              </el-form-item>
              <el-form-item label="付款用户名称">
                <span>{{ props.row.user.nickname }}</span>
              </el-form-item>
              <el-form-item label="购买数量">
                <span>{{ props.row.count }}</span>
              </el-form-item>
              <el-form-item label="支付金额">
                <span>{{ props.row.money }}</span>
              </el-form-item>
              <el-form-item label="支付类型">
                <span>微信支付</span>
              </el-form-item>
              <el-form-item label="订单状态">
                <span v-if="props.row.status === -2">支付失败</span>
                <span v-else-if="props.row.status === -1">待支付</span>
                <span v-else-if="props.row.status === 1">待核销</span>
                <span v-else-if="props.row.status === 2">已退款</span>
                <span v-else-if="props.row.status === 3">已完成</span>
              </el-form-item>
              <el-form-item label="收货人">
                <span>{{ props.row.consignee }}</span>
              </el-form-item>
              <el-form-item label="联系方式">
                <span>{{ props.row.mobile }}</span>
              </el-form-item>
              <el-form-item label="收货地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="订单添加时间">
                <span>{{ props.row.addTime }}</span>
              </el-form-item>
              <el-form-item label="订单支付时间">
                <span>{{ props.row.paytime }}</span>
              </el-form-item>
              <el-form-item label="交易订单号">
                <span>{{ props.row.tradeNo }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" prop="orderID" label="订单ID" width="100"></el-table-column>
        <el-table-column align="center" prop="productinfo.productName" label="产品名称" width="180"></el-table-column>
        <el-table-column align="center" prop="user.nickname" label="付款用户名称" width="120"></el-table-column>
        <el-table-column align="center" prop="userMobile" label="付款用户联系方式" width="150"></el-table-column>
        <el-table-column sortable align="center" prop="count" label="购买数量" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="money" label="支付金额" width="120"></el-table-column>
        <el-table-column align="center" prop="pay_type" label="支付类型" width="80">
          <template slot-scope="scope">
            <span>微信支付</span>
          </template>
        </el-table-column>
        <!--支付失败-2, 待支付-1, 待核销(已支付)1, 已退款2, 已完成3-->
        <el-table-column align="center" prop="status" label="订单状态" width="100"
          :filters="[{text: '支付失败', value: -2}, {text: '待支付', value: -1}, {text: '待核销', value: 1}, {text: '已退款', value: 2}, {text: '已完成', value: 3}]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status === -2">支付失败</span>
            <span v-else-if="scope.row.status === -1">待支付</span>
            <span v-else-if="scope.row.status === 1">待核销</span>
            <span v-else-if="scope.row.status === 2">已退款</span>
            <span v-else-if="scope.row.status === 3">已完成</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" prop="addTime" label="订单添加时间" width="150"></el-table-column>
        <el-table-column sortable align="center" prop="paytime" label="订单支付时间" width="150"></el-table-column>
        <el-table-column></el-table-column>
      </el-table>
    </div>
    <div class="all-pagination">
      <el-pagination background layout="prev, pager, next" :page-size="size" :total="count" @current-change="currentPage"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      size: 10,
      list: []
    };
  },
  methods: {
    clearFilter() {
      this.$refs.myTable.clearFilter();
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    getList(page, size) {
      let _this = this;
      this.$ajax({
        url:'order/getlist',
        data:{
          app:{
            page: page,
            size: size === undefined ? this.size : size,
          }
        },
        success(res) {
          if (res.data.code == 1) {
            _this.list = res.data.content.list;
            _this.count = res.data.content.count;
          } else {
            _this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }
      });
    },
    currentPage(page) {
      this.getList(page);
    }
  },
  created(){
    this.getList(1);
  }
};
</script>


<style scoped>
.shrink-box {
  width: 100%;
  font-size: 0;
}
.shrink-box >>> label {
  width: 100px;
  color: #99a9bf;
}
.shrink-box .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.333333%;
}
</style>
